<template>
  <div class="attribute-r">
    <el-collapse
      v-model="activeNames"
      v-if="currentElementList.length == 1"
      :key="window.getRootName() + 'ATTRIBUTE_' + this.currentElementList[0].id"
      accordion
    >
      <el-collapse-item title="基本属性" name="1">
        <BaseAttr></BaseAttr>
      </el-collapse-item>
      <el-collapse-item
        :title="getComponentName()"
        name="5"
        v-if="!this.coverComponent[this.currentElementList[0].component]"
      >
        <component
          class="exclusive-attr"
          :is="currentElementList[0].component + 'Attr'"
        ></component>
      </el-collapse-item>
      <el-collapse-item
        title="配色"
        name="2"
        v-if="currentElementList[0].attribute.colorGroup"
      >
        <ColorAttr></ColorAttr>
      </el-collapse-item>
      <el-collapse-item title="事件" name="3">
        <EventAttr></EventAttr>
      </el-collapse-item>
      <el-collapse-item title="动画" name="4">
        <AnimationAttr></AnimationAttr>
      </el-collapse-item>
    </el-collapse>
    <div v-if="false" class="project-attr">
      <div class="project-title">大屏名称</div>
      <el-input
        v-model.trim="canvas.name"
        placeholder="请输入大屏名称"
        @change="history.addHistory(store.clone(), 158)"
      />
      <!-- <div class="project-title">大屏地址
                <i class="el-icon-document-copy" title="复制地址" @click="copyLink"></i>
            </div>
            <el-input disabled v-model="preview"></el-input> -->
      <div class="project-title">大屏缩略图</div>
      <div class="upload-icon">
        <el-upload
          class="upload-demo"
          ref="upload"
          accept=".jpg,.jpeg,.png,.JPG,.JPEG,.PNG"
          action="#"
          :limit="1"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="uploadThumb"
        >
          <img
            :src="canvas.icon ? getPreview(canvas.icon) : defaultIcon"
            class="canvas-icon"
          />
          <div class="canvas-action" v-show="canvas.icon">
            <span @click.stop="removeThumb"
              ><i class="el-icon-delete"></i
            ></span>
          </div>
        </el-upload>
      </div>
    </div>
  </div>
</template>
<script>
import store from "@/js/store/state.js";
import elementName from "@/js/element/elementName.js";
import config from "@/js/util/config.js";
import PATH from "@/js/util/path.js";
import message from "@/js/util/message.js";
import bus from "@/js/event/bus.js";
import history from "@/js/main/history.js";
import defaultIcon from "@/image/main/toolbar/icon_img.svg";
import scene from "@/js/main/scene.js";

export default {
  components: {
    AnimationAttr: () => import("@/view/main/Attribute/AnimationAttr.vue"),
    BaseAttr: () => import("@/view/main/Attribute/BaseAttr.vue"),
    ColorAttr: () => import("@/view/main/Attribute/ColorAttr.vue"),
    EventAttr: () => import("@/view/main/Attribute/EventAttr.vue"),
    Bar01Attr: () => import("@/view/element/attribute/Bar01Attr.vue"),
    Bar02Attr: () => import("@/view/element/attribute/Bar02Attr.vue"),
    Bar03Attr: () => import("@/view/element/attribute/Bar03Attr.vue"),
    Bar04Attr: () => import("@/view/element/attribute/Bar04Attr.vue"),
    Bar05Attr: () => import("@/view/element/attribute/Bar05Attr.vue"),
    Bar06Attr: () => import("@/view/element/attribute/Bar06Attr.vue"),
    BoxModelAttr: () => import("@/view/element/attribute/BoxModelAttr.vue"),
    Bubble01Attr: () => import("@/view/element/attribute/Bubble01Attr.vue"),
    Bubble02Attr: () => import("@/view/element/attribute/Bubble02Attr.vue"),
    CarouselTextAttr: () =>
      import("@/view/element/attribute/CarouselTextAttr.vue"),
    Clock02Attr: () => import("@/view/element/attribute/Clock02Attr.vue"),
    CloudMapAttr: () => import("@/view/element/attribute/CloudMapAttr.vue"),
    DecorationAttr: () => import("@/view/element/attribute/DecorationAttr.vue"),
    Funnel01Attr: () => import("@/view/element/attribute/Funnel01Attr.vue"),
    Funnel02Attr: () => import("@/view/element/attribute/Funnel02Attr.vue"),
    Heat01Attr: () => import("@/view/element/attribute/Heat01Attr.vue"),
    Heat02Attr: () => import("@/view/element/attribute/Heat02Attr.vue"),
    Histogram01Attr: () =>
      import("@/view/element/attribute/Histogram01Attr.vue"),
    Histogram02Attr: () =>
      import("@/view/element/attribute/Histogram02Attr.vue"),
    Holo3dMapAttr: () => import("@/view/element/attribute/Holo3dMapAttr.vue"),
    Line01Attr: () => import("@/view/element/attribute/Line01Attr.vue"),
    Line02Attr: () => import("@/view/element/attribute/Line02Attr.vue"),
    Line03Attr: () => import("@/view/element/attribute/Line03Attr.vue"),
    Line04Attr: () => import("@/view/element/attribute/Line04Attr.vue"),
    Line05Attr: () => import("@/view/element/attribute/Line05Attr.vue"),
    Line06Attr: () => import("@/view/element/attribute/Line06Attr.vue"),
    Line07Attr: () => import("@/view/element/attribute/Line07Attr.vue"),
    MenuAttr: () => import("@/view/element/attribute/MenuAttr.vue"),
    MixedAttr: () => import("@/view/element/attribute/MixedAttr.vue"),
    Panel0101Attr: () => import("@/view/element/attribute/Panel0101Attr.vue"),
    Panel0102Attr: () => import("@/view/element/attribute/Panel0102Attr.vue"),
    Panel0103Attr: () => import("@/view/element/attribute/Panel0103Attr.vue"),
    PictureAttr: () => import("@/view/element/attribute/PictureAttr.vue"),
    Pie02Attr: () => import("@/view/element/attribute/Pie02Attr.vue"),
    Pie0101Attr: () => import("@/view/element/attribute/Pie0101Attr.vue"),
    Pie0102Attr: () => import("@/view/element/attribute/Pie0102Attr.vue"),
    Pie0103Attr: () => import("@/view/element/attribute/Pie0103Attr.vue"),
    Pie0301Attr: () => import("@/view/element/attribute/Pie0301Attr.vue"),
    Pie0302Attr: () => import("@/view/element/attribute/Pie0302Attr.vue"),
    Pie0401Attr: () => import("@/view/element/attribute/Pie0401Attr.vue"),
    Pie0402Attr: () => import("@/view/element/attribute/Pie0402Attr.vue"),
    PolarBarAttr: () => import("@/view/element/attribute/PolarBarAttr.vue"),
    Radar01Attr: () => import("@/view/element/attribute/Radar01Attr.vue"),
    Relationship01Attr: () =>
      import("@/view/element/attribute/Relationship01Attr.vue"),
    Relationship02Attr: () =>
      import("@/view/element/attribute/Relationship02Attr.vue"),
    RtspVideoAttr: () => import("@/view/element/attribute/RtspVideoAttr.vue"),
    SankeyAttr: () => import("@/view/element/attribute/SankeyAttr.vue"),
    Scatter3DAttr: () => import("@/view/element/attribute/Scatter3DAttr.vue"),
    ScatterDiagram01Attr: () =>
      import("@/view/element/attribute/ScatterDiagram01Attr.vue"),
    ScatterDiagram02Attr: () =>
      import("@/view/element/attribute/ScatterDiagram02Attr.vue"),
    SimpleAttr: () => import("@/view/element/attribute/SimpleAttr.vue"),
    Statistic05Attr: () =>
      import("@/view/element/attribute/Statistic05Attr.vue"),
    Surface01Attr: () => import("@/view/element/attribute/Surface01Attr.vue"),
    Surface02Attr: () => import("@/view/element/attribute/Surface02Attr.vue"),
    TimeAttr: () => import("@/view/element/attribute/TimeAttr.vue"),
    TreeAttr: () => import("@/view/element/attribute/TreeAttr.vue"),
    VButtonAttr: () => import("@/view/element/attribute/VButtonAttr.vue"),
    VHtmlAttr: () => import("@/view/element/attribute/VHtmlAttr.vue"),
    VideoAttr: () => import("@/view/element/attribute/VideoAttr.vue"),
    VIframeAttr: () => import("@/view/element/attribute/VIframeAttr.vue"),
    VTableAttr: () => import("@/view/element/attribute/VTableAttr.vue"),
    VTextAttr: () => import("@/view/element/attribute/VTextAttr.vue"),
    ObjectTreeAttr: () => import("@/view/element/attribute/ObjectTreeAttr.vue"),
    GanttAttr: () => import("@/view/element/attribute/GanttAttr.vue"),
  },
  data() {
    return {
      window: window,
      currentElementList: store.getCurrentElementList(),
      activeNames: ["1"],
      canvas: store.getCanvas(),
      defaultIcon: defaultIcon,
      coverComponent: {
        Clock: true,
        Timing: true,
        Calendar01: true,
        Statistic01: true,
        Statistic02: true,
        Statistic03: true,
        Statistic04: true,
        Icon: true,
        Shape: true,
        VSwitch: true,
        Boxplot01: true,
        Candlestick01: true,
        Bar08: true,
        Bar09: true,
        Relationship03: true,
        PictorialBar01: true,
        ThemeRiver01: true,
        Bar07: true,
        GlobeLayer: true,
        Line3d: true,
        GraphGL01: true,
        Heatmap01: true,
        Group01: true,
        Parallel01: true,
        Treemap01: true,
        Group: true,
        // 新增通用组件：单选框、多选框、select选择器、
        Radio: true,
        Checkbox: true,
        VSelect: true,
        Cascader: true,
        Slider: true,
        Transfer: true,
        Form: true,
        Progress: true,
        Tabs: true,
        Breadcrumb: true,
        Dropdown: true,
        Steps: true,
        Timeline: true,
        Divider: true,
        Collapse: true,
        InputNumber: true,
        Pagination: true,
        TimePicker: true,
        Function: true,
      },
      preview: "",
      history: history,
      store: store,
    };
  },
  methods: {
    copyLink() {
      let textArea = document.createElement("textarea");
      textArea.value = this.preview;
      document.body.appendChild(textArea);
      textArea.select();
      let msg = document.execCommand("copy") ? "成功" : "失败";
      message.message(`复制${msg}`, msg === "成功" ? "success" : "error", 1000);
      document.body.removeChild(textArea);
    },
    getPreview(url) {
      if (url.indexOf("data:image") == 0) {
        return url;
      } else if (url) {
        return url
          ? `${config.getServiceURL(
              "scene"
            )}service/scene/file/download?file=${url}`
          : "";
      }
    },
    uploadThumb(file) {
      this.$refs.upload.clearFiles();
      let reader = new FileReader();
      reader.readAsDataURL(file.raw);
      reader.onload = function (e) {
        store.setCanvas({ icon: e.target.result });
      };
    },
    removeThumb() {
      store.setCanvas({ icon: "" });
    },
    getComponentName() {
      return elementName[this.currentElementList[0].component]
        ? elementName[this.currentElementList[0].component].label
        : "";
    },
    getProjectLink() {
      if (scene.getID() !== null) {
        this.preview = `${
          window.location.href.split(PATH.HOME)[0]
        }/viewer?layout=${this.$route.query.layout}&id=${scene.getID()}`;
      }
    },
  },
  mounted() {
    this.getProjectLink();
    bus.on("getProjectLink", this.getProjectLink);
  },
  destroyed() {
    bus.off("getProjectLink", this.getProjectLink);
  },
};
</script>
<style lang="scss" scoped>
.attribute-r {
  width: 100%;
  height: 100%;
  overflow: auto;
  padding: 0 6px 0 8px;
  &::-webkit-scrollbar {
    display: none;
  }
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.attribute-r ::v-deep.el-collapse-item__content {
  padding-bottom: 0 !important;
  line-height: normal;
}
.attribute-r ::v-deep.el-collapse-item__wrap {
  border-bottom: none;
}
.attribute-r ::v-deep.el-collapse-item__header {
  background-color: $BackGroundColor;
  color: $FontWhite;
  font-weight: 600;
  border-bottom: 1px solid #ffffff0f;
}
.attribute-r ::v-deep.el-collapse-item__header.is-active {
  border-bottom-color: transparent;
}
.attribute-r ::v-deep.el-collapse {
  border: none;
}
.attribute-r ::v-deep.el-collapse-item__wrap {
  background-color: $BackGroundColor;
}
.project-attr {
  padding: 5px;
  .project-title {
    font-size: 14px;
    color: $FontGray;
    margin: 10px 0 5px 0;
    display: flex;
    align-items: center;
    i {
      cursor: pointer;
      margin-left: auto;
    }
  }
  ::v-deep .el-input__inner {
    height: 30px !important;
    line-height: 30px !important;
    background: #ffffff0f;
    border: 0 none;
    color: $FontWhite;
    font-size: 12px;
    padding: 0 5px;
    &::placeholder {
      color: $FontGray;
      font-size: 12px;
    }
  }
}
.upload-icon {
  width: 220px;
  height: 100px;
  border: 1px solid #000000;
  border-radius: 5px;
  position: relative;
  background: #ffffff0f;
  ::v-deep .upload-demo {
    width: 100%;
    height: 100%;
    display: block !important;
  }
  ::v-deep .el-upload {
    width: 100%;
    height: 100%;
    display: block !important;
  }
  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .canvas-action {
    position: absolute;
    top: 0;
    right: 0;
    i {
      margin: 5px;
      font-size: 14px;
      color: #ffffff80;
    }
  }
}
.exclusive-attr {
  max-height: $attrMaxHeight;
  overflow: auto;
}
</style>
